// 初始化 函数模块
import {initState} from "./initState";
import {compileToFunction} from "./compiler/index";
import {mountComponent} from "./lifecycle";

export function initMixin (Vue) {
    // 初始化函数
    Vue.prototype._init = function(options) {
        // console.log(options);
        // vm、this 都是Vue实例
        const vm = this;
        vm.$options = options;
        // 1)初始化状态
        initState(vm);
        // 2)进行页面挂载
        if (vm.$options.el) { // 存在el  调用$mount
            vm.$mount(vm.$options.el);
        }
    }
    // $mount函数 传入element 生成render函数
    Vue.prototype.$mount = function (el) {
        const vm = this;
        el = document.querySelector(el);
        const options = vm.$options;
        if (!options.render) {
            let template = options.template;
            if (!template) {
                template = el.outerHTML;
            }
            // 将template变成render函数
            // 创建render函数 -》 虚拟dom -》 渲染真实dom
            const render = compileToFunction(template);// 开始编译
            options.render = render;
        }
        mountComponent(vm,el);
    }


    // diff算法 主要是两个虚拟节点比对 我们需要根据模板渲染出一个render函数，render函数可以返回一个虚拟节点，数据更新了重新调用render函数 可以再返回一个虚拟节点
}
